<template>
    <div class="printBox" v-if="types != ''">
           
        <div class="printBox_item" style=" background-color: #fff;">
            <!-- <TagsSelect   @call-parent="parentMethod" :types="types" v-if="types" :list="list" />  -->
            <el-tabs
                v-model="types" v-if="menuItem.length > 0"
                class="custom-tabs"
                @tab-change="parentMethod"
            >
                <el-tab-pane
                    v-for="tab in menuItem"
                    :key="tab.perms"
                    :label="tab.menuName"
                    :name="tab.perms"
                    >
                </el-tab-pane>
            </el-tabs>

            <RadioGroupBtn @change="RadioGroupBtnChange"  style="margin-left: 20px;margin-top: 20px;" v-if="list2.length"   :list="list2"></RadioGroupBtn>

            <div class="printBox_item_content">
                <el-form :model="form" label-width="80px"  >
                    <el-form-item label="抬头设置" prop="title">
                        <el-input v-model="form.title" style="width: 400px;" />
                    </el-form-item>
                    <el-form-item label="地址设置" prop="address">
                        <el-input v-model="form.address" style="width: 400px;" />
                    </el-form-item>
                    <el-form-item label="电话设置" prop="phone">
                        <el-input v-model="form.phone" style="width: 400px;" />
                    </el-form-item>
                    <el-form-item>
                       <div style="margin-top: 30px;">
                         <el-button type="primary" @click="savePrintConfigApi"  style="padding: 5px 30px;">保存</el-button>
                        <el-button type="text" @click="saveAllPrintConfigApi"  style="padding: 5px 0px;">应用至全部</el-button>
                       </div>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="printBox_item">
            <div class="printBox_item_text">预览</div>
            <!-- 病例 -->
            <dome1 v-if="radio1 == 1" :info="form"></dome1>
            <dome2 v-if="radio1 == 2" :info="form"></dome2>
            <dome3 v-if="radio1 == 3" :info="form"></dome3>
            <dome4 v-if="radio1 == 4" :info="form"></dome4>
            <dome5 v-if="radio1 == 5" :info="form"></dome5>
            <dome6 v-if="radio1 == 6" :info="form"></dome6>
            <dome7 v-if="radio1 == 7" :info="form"></dome7>
            <dome8 v-if="radio1 == 8" :info="form"></dome8>
            <dome9 v-if="radio1 == 9" :info="form"></dome9>
        </div>
    </div>
    <div v-else style="margin: 0 auto;display: flex;justify-content: center;padding-top: 100px; align-items: center;">
        <el-empty description="暂无权限" :image="emptyImage" :image-size="260" />
    </div>
</template>
<script setup  lang="ts">
    import stores from '@/store';
    import emptyImage from '@/assets/icon/internet_empty_illustration.svg';
    import {  getPrintConfigList,savePrintConfig,saveAllPrintConfig} from '@/api/print/index';
    import type {PrintResponse,PrintInfo,PrintResponseData} from '@/types/print'
    import dome1 from './common/dom1.vue'
    import dome2 from './common/dom2.vue'
    import dome3 from './common/dom3.vue'
    import dome4 from './common/dom4.vue'
    import dome5 from './common/dom5.vue'
    import dome6 from './common/dom6.vue'
    import dome7 from './common/dom7.vue'
    import dome8 from './common/dom8.vue'
    import dome9 from './common/dom9.vue'
       
    const route = useRoute();
    const query = route.query;

    let menuList = ref<any>( await stores.useBaseDataStore().findMenuList(route.query.submenuId));

    menuList.value.filter((item:any) => {
    return item.menuType == 2;
    })
    let menuItem:any = ref<any>(menuList.value);
    // ref<any>(menuList.value);
    //console.log(menuItem,'menuItem');
    const types = ref<string>(''); // 默认选中标签
    if(menuItem.value.length > 0){
        types.value = menuItem.value[0].perms
    }
    const typeid = ref<any>(''); // 默认选中标签
    const list = ref<any>([])
    const list2 = ref<any>([])
    const radio1 =  ref<any>(0)
    const form = ref<PrintInfo>({
        title:'',
        address:'',
        phone:'',
        printCategory:'',
        printType:'',
    });
    const selectFun = (val:string) =>{
        list2.value = []
        let categoryCode = ''
        setTimeout(() => {
            list2.value = []
            let typea = ''
            if(types.value == 'manage-print-document'){
                typea = '1'	
            }
            if(types.value == 'manage-print-receipt'){
                typea = '2'	
            }
            for (let index = 0; index < printTypeEnum.value.length; index++) {
                if(typea == printTypeEnum.value[index].categoryCode){
                    printTypeEnum.value[index].id = printTypeEnum.value[index].value
                    list2.value.push(printTypeEnum.value[index])
                }
            }
            radio1.value = list2.value[0].value
            getForm()

        }, 100);

    }
    const parentMethod = (e:any) => {
        //console.log('父组件方法被调用',e);
        types.value = e
        selectFun(types.value)

    };
 
    // for (let index = 0; index < menuItem.value.length; index++) {
    //     let item = menuItem.value[index];
    //     if(item.perms == 1){

    //     }
        
    // }
    const printCategoryEnum =  ref<any>(stores.useBaseDataStore().getEnumSelect('printCategoryEnum'))
    
    const printTypeEnum =  ref<any>(stores.useBaseDataStore().getEnumSelect('printTypeEnum'))
    //console.log(printTypeEnum);
    const  getPrintConfigListInfo = ref<any>()
    
    const getPrintConfigListApi = async(t:any)=>{
        let res = await getPrintConfigList()
       
        getPrintConfigListInfo.value = res.data
        if(t) return
        selectFun(types.value)
        // for (let index = 0; index < printCategoryEnum.value.length; index++) {
        //     const element = printCategoryEnum.value[index].value;
        //     if(index == 0){
        //         types.value  = element
        //         
        //     }
        //     list.value.push(element)
        // }
    }
    getPrintConfigListApi('')
    selectFun(types.value)
    
   

    const getForm = () =>{
        //1 文书   2票据
        form.value.printCategory = types.value
        form.value.printType = radio1.value
         
        //console.log(form.value);

        if(types.value == 'manage-print-document'){
            for (let index = 0; index < getPrintConfigListInfo.value.documentList.length; index++) {
                let item = getPrintConfigListInfo.value.documentList[index];
                if(item.printType == radio1.value){
                    form.value.title = item.title
                    form.value.address = item.address
                    form.value.phone = item.phone
                }
            }
        }else if(types.value == 'manage-print-receipt'){
            for (let index = 0; index < getPrintConfigListInfo.value.receiptList.length; index++) {
                let item = getPrintConfigListInfo.value.receiptList[index];
                if(item.printType == radio1.value){
                    form.value.title = item.title
                    form.value.address = item.address
                    form.value.phone = item.phone
                }
            }
        }


       
    }

   

    const RadioGroupBtnChange = (e:number) =>{
        //console.log(e,'RadioGroupBtnChange');
        radio1.value = e
        getForm()
    }

   
    //保存
    const savePrintConfigApi = async()=>{
        let res = await savePrintConfig(form.value)
        if (res.code == '200') {
            getPrintConfigListApi(1)

            ElMessage({
            type: 'success',
            message: '操作成功',
            });
        } else {
           
        }
    }
    const saveAllPrintConfigApi = async()=>{
     
        let res = await saveAllPrintConfig(form.value)
        if (res.code == '200') {
            getPrintConfigListApi(1)
            ElMessage({
            type: 'success',
            message: '操作成功',
            });
        } else {
            
        }
    }
    
    // 
</script>
<style lang="scss" scoped>
    .printBox{
        display: flex;
        background-color: #f4f6f9;
        height: 100%;
        .printBox_item{
            ::v-deep(.el-tabs__item) {
            width: 110px !important; /* 设置每个tab的宽度 */
            padding: 0 !important; /* 去除默认padding */
            font-size: 16px !important; /* 设置字体大小 */
            }
            ::v-deep(.el-tabs__nav-wrap:after){
                height: 1px !important;
            }
            height: 100%;
            width: calc(100% - 575px);
            position: relative;
            .printBox_item_text{
                position: absolute;
                font-weight: 600;
                font-family: Microsoft YaHei, Microsoft YaHei;
                font-size: 16px;
                color: rgba(0,0,0,0.9);
                text-align: left;
                font-style: normal;
                text-transform: none;
                top: 13px;
                left: 13px;
            }
        }
        .printBox_item:nth-of-type(2){
            flex: 1;
            width: 559px;
            margin-left: 14px;
        }
        .printBox_item_content{
            padding: 20px;
        }
    }
   
</style>